import React from 'react';
import {PageContainer} from "@ant-design/pro-components";
import {DataType, userColumns} from "@/pages/Manage/columns/userColumns";
import type {
    ProColumnType,
    ProFormInstance,
} from '@ant-design/pro-components';
import {
    ProCard,
    ProTable,
} from '@ant-design/pro-components';
import {Button} from 'antd';
import { useRef, useState } from 'react';
import {listUserVoByPageUsingPost} from "@/services/yuanapi_backed/userController";



const columns: ProColumnType<DataType>[] = [
    ...userColumns,

];
const initData = {
    bordered: true,
    loading: false,
    columns,
    // pagination: {
    //     show: true,
    //     pageSize: 5,
    //     current: 1,
    //     total: 100,
    // },
    size: 'small',
    expandable: false,
    headerTitle: '用户管理',
    tooltip: '用户管理 tooltip',
    showHeader: true,
    footer: true,
    rowSelection: {},
    scroll: false,
    hasData: true,
    tableLayout: undefined,
    toolBarRender: true,
  search: {
    show: true,
    span: 8,
    collapseRender: true,
    labelWidth: 80,
    filterType: 'query',
    layout: 'horizontal',
  },
    options: {
        show: true,
        density: true,
        fullScreen: true,
        setting: true,
    },
};
const UserManage = () => {
    const ref = useRef<ProFormInstance>();
    const [config] = useState<any>(initData);
    const tableColumns = (config.columns || columns)?.map((item: any) => ({
        ...item,
        ellipsis: config.ellipsis,
    }));

    return (
    <PageContainer>
        <ProCard
            split="vertical"
            bordered
            headerBordered
            style={{
                height: '100vh',
                overflow: 'hidden',
            }}
        >
            <ProCard
                style={{
                    height: '100vh',
                    overflow: 'auto',
                }}
            >
                <ProTable
                    {...config}
                    formRef={ref}
                    pagination={
                      config.pagination?.show
                        ? config.pagination
                        : {
                          pageSize: 10,
                        }
                    }
                    search={config.search?.show ? config.search : {}}
                      expandable={
                          config.expandable && {
                              expandedRowRender: (record: DataType) => (
                                  <p>{record.userProfile}</p>
                              ),
                          }
                      }
                    options={config.options?.show ? config.options : false}
                    toolBarRender={
                        config?.toolBarRender
                            ? () => [
                                <Button key="refresh" type="primary">
                                    刷新
                                </Button>,
                            ]
                            : false
                    }
                    footer={config.footer ? () => 'Here is footer' : false}
                    headerTitle={config.headerTitle}
                    columns={tableColumns}
                    // dataSource={genData(config.pagination?.total || 10)}
                    scroll={config.scroll}
                    request={async (  params:  {
                      userName : string;
                      userRole: string;
                      pageSize:string;
                      userProfile: string;
                      current: string;
                    },) => {
                      // setLoading(true)
                      const res = await listUserVoByPageUsingPost({
                        ...params
                      });
                      // console.log(res)
                      if (res.data) {
                        // setData(res.data)
                        // setLoading(false)
                        return {
                          data: res.data.records || [],
                          success: true,
                          total: res.data.total,
                        };
                      } else {
                        return {
                          data: [],
                          success: false,
                          total:0
                        };
                      }
                    }}
                />
            </ProCard>

        </ProCard>
    </PageContainer>

  );
};

export default UserManage;
